<template>
  <div class="container">
    <div class="gs">
      <section class="bannerimg" style="background:url(/img/qybcsbanner.jpg) no-repeat center"></section>
      <section class="cssc1">
        <h3>精选财税服务</h3>
        <p class="xq">专注企业 “钱”途发展</p>
        <ul class="af">
          <li class="li1 li" v-for="(gj,gji) in title.zym.service" :class="['li'+(gji+1),(gji+1)%3==0?'last':'']" :key="gji" >
            <h4>{{gj.servicename}}</h4>
            <ul>
              <li v-for="(gj2,gji2) in gj.threeServiceRes" :key="gji2" @click="xqymtz(gj2.id,gj2.pid)"><img  :src="gj2.fouriconimg?'https://exam.zhonghaiqihang.com/'+gj2.fouriconimg:'https://www.qiyebang.net.cn/static/img/sc1l12.png'" width="64" height="64">
                <div>
                  <h5>{{gj2.servicename}} </h5>
                  <p>{{gj2.remark}}</p>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </section>
      <section class="cssc2">
        <h3>咨询管家</h3>
        <p class="xq">专业管家在线服务，一对一免费咨询</p>
        <ul class="af">
          <li  v-for="(gj,gji) in title.gj" :class="['li'+(gji+1),(gji+1)%5==0?'last':'']" :key="gji">
            <div class="nm" :style="{background:'url('+'https://exam.zhonghaiqihang.com'+gj.specialavatarone+') no-repeat'}">
              <h4>{{gj.username}}</h4>
              <p>{{gjname[gji]}}</p>
            </div>
            <div class="hover af">
              <img :src="'https://exam.zhonghaiqihang.com'+gj.specialavatartwo" width="157" height="158">
              <div>
                <p class="p1">{{gj.username}}  <span>{{title.zym.label}}</span></p>
                <p class="p2">电话： <span>{{gj.mobile}}</span></p>
                <p class="p3">擅长: {{gj.major}}</p>
                <a :href="gj.cclink" class="zx" target="_blank">在线咨询</a>
              </div>
            </div>
          </li>
        </ul>
      </section>
      <my-heart></my-heart>
    </div>
    <my-ft></my-ft>

  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    name: 'HelloWorld',
    data () {
      return {
        selenv:false,
        title:null,
        yqljData:null,
        dlzt:'',
        fuwu:1,
        sjsz:[],
        gjname:['经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问'],
      }
    },
    async asyncData ({ params }) {
    let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
    let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Special/specialData`,{
      params:{
        serviceid:'44'
      }});
    let nh4 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Receptionist/receptionistData`);
    let data  = {nav:nh.data,zym:nh3.data,gj:nh4.data};
    return { title: data}
  },
  mounted:function(){
    $('.tbnava1').addClass('select');
    var domain = window.location.href;
    let a = document.cookie;
    let cookie = '';
    if(a.indexOf('userinfoRes')!=-1){
      let b = a.split('userinfoRes=');
      let c = b[1].split(';');
      cookie = c[0];
    }
    this.dlzt = cookie;
    $(document).ready(function(){
      $('.tbnava1').addClass('select');
    })
  }
  ,head() {
    return {
      title: this.title.zym.oneService.title,
      meta: [
        { hid: 'description', name: 'description', content: this.title.zym.oneService.descript },
        { hid: 'keywords', name: 'keywords', content:this.title.zym.oneService.keyword }
      ]
    }
  },
  methods:{
    xqymtz:function(e1,e2){

      let href = '/ServiceDetails/'+e1+'?name='+e2;
      window.open(href,'_blank');
    },
    zdwy:function(e){
      $('.tbnava1').addClass('select');

      if(e==1){
        this.selenv = true;
      }else if(e==0){
        this.selenv = false;
      }

    }
  }
  }
</script>

<style>

</style>
